<script lang="ts">
    import { url } from '$lib/data';
    import { onDestroy, onMount } from 'svelte';
    url.set("/chart");

	import Mo1 from './motor1.svelte'
	import Mo2 from './motor2.svelte'
    import { ButtonGroup, Button } from 'flowbite-svelte';
	
    import { slide } from 'svelte/transition';

	let mo = $state(1)

</script>

<div transition:slide class="mt-4 grid place-items-center gap-1">
	<!-- <div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md flex flex-col p-4 sm:p-6 w-1/4 transition-shadow duration-300 ease-in-out hover:shadow-lg "> -->
		<div class="grid place-items-center gap-1">
			<ButtonGroup>
				<Button onclick={() => {mo = 1}}>肩关节历史图表</Button>
				<Button onclick={() => {mo = 2}}>肘关节历史图表</Button>
			</ButtonGroup>
		</div>
	<!-- </div> -->
	<div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md flex flex-col p-4 sm:p-6 w-[90%] transition-shadow duration-300 ease-in-out hover:shadow-lg ">
		{#if mo == 1}
		<Mo1></Mo1>
		{:else}
		<Mo2></Mo2>
		{/if}
	</div>
</div>